<script setup lang="ts">
// 定义状态变量
import { ref } from "vue";
// 导入 路由参数
import { useRoute } from "vue-router";

const title = ref('')

// 调用并获取路由参数
const route = useRoute()
// 获取参数传递的参数
// console.log(route.query.query);
// 设置给状态变量
// title.value = route.query.query as string
// title.value = route.query.inp as string 搜索框传值

// 动态路由传递参数
title.value = route.params.words as string

</script>

<template>
  <div class="search">
    <!-- <p>搜索关键字: {{title}}</p> -->
    <!-- <p>搜索关键字: {{$route.query.query}}</p> -->

    <!-- 动态路由传递参数 -->
    <p>搜索关键字: {{title}}</p>
    <p>搜索关键字: {{$route.query.inp}}</p>
    <p>搜索关键字: {{$route.params.words}}</p>

    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>
